<template autoRoute="true">
  <div class="wbs-container">
    <div class="title">项目成员</div>
    <CustomTabs v-model="activeTab" :items="tabItems" :showAddButton="false">
      <template #content="{ activeTab: tabItem }">
        <div v-if="toolbarOptions">
          <!-- 封装的Toolbar组件 -->
          <CustomToolbar
            :fields="[]"
            :visibleButtons="toolbarOptions"
            :search-fields="['keyword']"
            @search="handleSearch"
            @openAddRecordDialog="addMember"
          >
            <template #toolbar-left>
              <button class="toolbar-btn" @click="importMember">
                <img src="@/assets/pm/import.svg" /> 导入成员
              </button>
            </template>
          </CustomToolbar>
          <div class="wbs-tree-container">
            <CLBatchOpToolbar
              :show="selectedRows.length > 0"
              :selected-count="selectedRows.length"
              :showDelete="false"
              style="height: 39px"
            >
              <button class="batch-btn">移除成员</button>
            </CLBatchOpToolbar>
            <el-empty
              class="table-container"
              description="暂无数据"
              v-if="tableData.length === 0"
            />
            <div class="table-container" v-else></div>
          </div>
        </div>
      </template>
    </CustomTabs>
  </div>
  <ImportMemberDialog v-model="isShowImportMemberDialog" />
  <AddMemberDialog v-model="isShowAddMemberDialog" :roleList="tabItems" />
</template>

<script lang="ts" setup>
  import { ref, onMounted, nextTick, useTemplateRef } from "vue";
  import CLBatchOpToolbar from "@/components/CLBatchOpToolbar.vue";
  import CustomTabs from "@/components/CustomTabs.vue";
  import CustomToolbar from "@/components/CustomToolbar.vue";
  import type { TabItem } from "@/data/wbsFields";
  import * as VTable from "@visactor/vtable";
  import { CLSelectEditor } from "@/components/CLSelectEditor.ts";
  import AddMemberDialog from "@/views/pm/setting/pmMember/AddMemberDialog.vue";
  import ImportMemberDialog from "@/views/pm/setting/pmMember/ImportMemberDialog.vue";
  import { projectMemberListAJAX } from "@/api/pm/member";
  import { projectRoleListAJAX } from "@/api/pm/role";
  import { useRoute } from "vue-router";
  import router from "@/router";

  const route = useRoute();

  const currentPage = ref(1);
  const pageSize = ref(10);
  const totalNumber = ref(0);

  // 标签页数据
  const activeTab = ref<string>("");

  const tabItems = ref<TabItem[]>([]);

  // 工具栏选项
  const toolbarOptions = ref({
    add: {
      name: "添加成员",
      enable: true,
    },
    fieldConfig: false,
    filter: false,
    sort: false,
    lineHeight: false,
    search: true,
  });

  const addMember = () => {
    console.log("addMember");
    isShowAddMemberDialog.value = true;
  };

  const importMember = () => {
    console.log("importMember");
    isShowImportMemberDialog.value = true;
  };

  const isShowImportMemberDialog = ref(false);

  const isShowAddMemberDialog = ref(false);

  // 处理搜索事件
  const handleSearch = (keyword: string, searchFields: string[]) => {
    // getTableData(keyword);
  };

  interface IMember {
    id: number;
    member: string;
    role: string[];
  }

  const selectedRows = ref<IMember[]>([]);

  const tableData = ref<IMember[]>([]);

  const getTableData = async (keyword = "") => {
    const result = await projectMemberListAJAX(
      route.query.projectId as string,
      activeTab.value,
      {
        pageNo: currentPage.value,
        pageSize: pageSize.value,
        name: keyword,
      },
    );
    totalNumber.value = result.total;
    tableData.value = result.result.map((item: any) => {
      return {
        id: item.id,
        member: item.name,
        role: item.role.map((roleItem: any) => roleItem.name.zh_CN),
      };
    });
  };

  const getRoleData = async () => {
    const result = await projectRoleListAJAX(route.query.projectId as string);
    console.log("22", result);
    tabItems.value = result.map((item: any) => {
      return {
        id: item.id,
        title: item.name.zh_CN,
        closable: false,
      };
    });

    activeTab.value = tabItems.value[0].id as unknown as string;
  };

  onMounted(async () => {
    await getRoleData();
    // await getTableData();
  });
</script>

<style scoped lang="scss">
  $primary-color: #1890ff;
  $success-color: #52c41a;
  $warning-color: #fa8c16;
  $danger-color: #ff4d4f;
  $text-color: #42464e;
  $light-text: rgba(0, 0, 0, 0.5);
  $border-color: #e0e0e0;
  $background-color: #f8f9fa;
  $hover-bg: #e6f7ff;

  .title {
    font-size: 16px;
    color: #141414;
    font-weight: 600;
    margin: 12px 0 0 12px;
  }

  .batch-btn {
    padding: 4px 12px;
    background-color: #fff;
    border: 1px solid #ff4d4f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    color: #ff4d4f;
  }

  .toolbar-btn {
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    color: $text-color;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 4px;

    .icon {
      font-size: 16px;
    }

    &:hover {
      border-color: $primary-color;
      background: $hover-bg;
    }

    &.active {
      color: $primary-color;
      border-color: $primary-color;
      background: $hover-bg;
    }
  }
  .wbs-container {
    background-color: #ffffff;
  }

  .wbs-tree-container {
    background-color: #fff;
    padding: 0 8px;
    position: relative;
    .table-container {
      margin-top: 8px;
      height: calc(100vh - 210px);
    }
  }

  /* 滚动条样式 */
  .wbs-tree-container::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .wbs-tree-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
  }

  .wbs-tree-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
  }

  .wbs-tree-container::-webkit-scrollbar-thumb:hover {
    background: #555;
  }

  .pagination-container {
    margin-top: 8px;
    display: flex;
    justify-content: flex-end;
  }
</style>
